function zoom(id, size)
{
  var img = document.getElementById(id +'Img');
  var frame = document.getElementById(id +'Frame');
  var data = window[id +'_data'];
  
  if(small[id])  // If small, fix any formatting concerns and otherwise block all zooming.
  {
    img.style.width    = data.width  +'px';
    img.style.height   = data.height +'px';
    frame.style.width  = data.width  +'px';
    frame.style.height = data.height +'px';
    return;
  }

  if(size=='fit')
  {  
    img.style.width  = (scaled_width  = data.width*data.scale)  +'px';
    img.style.height = (scaled_height = data.height*data.scale) +'px';
    if(scaled_width  < data.framewidth)  { frame.style.width  = scaled_width +'px'; }
    else { frame.style.width  = data.framewidth +'px'; }
    if(scaled_height < data.frameheight) { frame.style.height = scaled_height +'px'; }
    else { frame.style.height = data.frameheight +'px'; }

    window.zoomlevel[id]=size='fit';
    window.dragframe=null;
    frame.scrollTop = 0;
    frame.scrollLeft = 0;
  } else {
    img.style.width  = data.width +'px';
    img.style.height = data.height +'px';
    frame.style.width  = Math.min(data.width,  data.framewidth);
    frame.style.height = Math.min(data.height, data.frameheight);
    window.zoomlevel[id]=size='actual';
  }
  
//  document.getElementById("zoombtn"+id+size).style.background = 'yellow';
}

function zoomtoggle(id) { zoom(id, zoomlevel[id]=='fit'?'actual':'fit'); }

function dragStop()
{
  if(!window.numb && window.dragframe!=null)
  {
    zoom("left", "fit");
    zoom("right", "fit");
    window.dragframe = null;
    gonumb();
  }
}

function dragStart(id, event)
{
  if(event.preventDefault) { event.preventDefault(); }
  if(window.numb || small[id]) { return; }
  if(window.dragframe!=null) { window.dragframe=null; return true; }

  var img = document.getElementById(id +'Img');

  var frame = document.getElementById(id +'Frame');
  var clickX = event.offsetX?(event.offsetX):event.layerX; //-frame.offsetLeft;
  var clickY = event.offsetY?(event.offsetY):event.layerY; //-frame.offsetTop;
  var oldframeW = frame.clientWidth;
  var oldframeH = frame.clientHeight;

  if(window.zoomlevel[id]!='actual') { zoom(id, 'actual'); }  

  window.dragX = event.screenX;
  window.dragY = event.screenY;
  window.dragframe = frame;

  frame.scrollLeft = clickX/(oldframeW)*(img.offsetWidth-oldframeW); // - (frame.offsetWidth-oldframeW)/2;
  frame.scrollTop = clickY/(oldframeH)*(img.offsetHeight-oldframeH); // - (frame.offsetHeight-oldframeH)/2;
  
//alert(frame.scrollTop +" = "+ clickY +"/"+ oldframeH +"*("+ img.offsetHeight +"-"+ frame.clientHeight +")");
  
  gonumb();
}

function drag(event)
{
  var frame = window.dragframe;
  if(frame==null) {return; }
    
  frame.scrollTop  -= event.screenY - window.dragY;
  frame.scrollLeft -= event.screenX - window.dragX;
  window.dragY = event.screenY;
  window.dragX = event.screenX;
}

function gonumb()
{
  window.numb=true;
  window.numbtmr = setTimeout("stopnumb()", 50);
}

function stopnumb()
{
  clearTimeout(window.numbtmr);
  window.numb=false;
}

function init()
{
  window.frm = document.forms.vote;

  window.dragframe = null;
  window.zoomlevel = new Array();
  window.small = new Array();
  left_data.framewidth = document.getElementById("leftFrame").offsetWidth-8;
  left_data.frameheight = document.getElementById("leftFrame").offsetHeight-8;
  left_data.frameaspect = left_data.framewidth / left_data.frameheight;
  left_data.scale = Math.min(left_data.framewidth/left_data.width, left_data.frameheight/left_data.height);
  right_data.framewidth = document.getElementById("rightFrame").offsetWidth-8;
  right_data.frameheight = document.getElementById("rightFrame").offsetHeight-8;
  right_data.frameaspect = right_data.framewidth / right_data.frameheight;
  right_data.scale = Math.min(right_data.framewidth/right_data.width, right_data.frameheight/right_data.height);
  small.left  = left_data.scale>=1;
  small.right = right_data.scale>=1;
  
  zoom('left', 'fit');
  zoom('right', 'fit');
  
  frm.vote.tag_tagname.select();
  stopnumb();
}

function enum(obj)
{
  for(i in obj) { alert(i +':'+ obj[i]); }
}
